<template>
    <!-- 时间线组件，展示操作历史 -->
    <el-timeline class="timeline">
        <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :color="activity.color"
            :timestamp="activity.timestamp"
        >
            {{ activity.content }}
        </el-timeline-item>
    </el-timeline>
</template>

<script setup>
// 引入 Element Plus 时间线组件
import { ElTimeline, ElTimelineItem } from 'element-plus'
import { ref, onMounted } from 'vue'

// 操作历史数据
const activities = ref([
    {
        content: '权限降级',
        timestamp: '2025-04-03 20:46',
        color: 'red'
    },
    {
        content: '权限升级',
        timestamp: '2025-04-03 20:46',
        color: 'yellow'
    },
    {
        content: '修改邮箱',
        timestamp: '2025-04-03 20:46',
        color: 'blue'
    },
    {
        content: '修改邮箱',
        timestamp: '2025-04-03 20:46',
        color: 'blue'
    },
    {
        content: '修改邮箱',
        timestamp: '2025-04-03 20:46',
        color: 'blue'
    },
    {
        content: '修改邮箱',
        timestamp: '2025-04-03 20:46',
        color: 'blue'
    },
    {
        content: '修改邮箱',
        timestamp: '2025-04-03 20:46',
        color: 'blue'
    },
    {
        content: '修改邮箱',
        timestamp: '2025-04-03 20:46',
        color: 'blue'
    },
    {
        content: '修改邮箱',
        timestamp: '2025-04-03 20:46',
        color: 'blue'
    },
    {
        content: '修改邮箱',
        timestamp: '2025-04-03 20:46',
        color: 'blue'
    },
    {
        content: '修改邮箱',
        timestamp: '2025-04-03 20:46',
        color: 'blue'
    },
    {
        content: '修改邮箱',
        timestamp: '2025-04-03 20:46',
        color: 'blue'
    },
    {
        content: '用户创建',
        timestamp: '2025-04-12 20:46',
        color: '#0bbd87'
    }
])

// onMounted(() => {
//     // 这里可以进行数据的异步更新
//     // console.log(1);
// })
</script>

<style scoped>
.timeline {
    margin: 1%;
}
</style>